import React, { useState, useEffect } from "react";
import "../static/css/ArticleList.css";
import { List, Row, Col, Modal, message, Button, Tooltip } from "antd";
import axios from "axios";
import { formatStamp, timesago } from "../filters/index"
import servicePath from "../config/apiUrl";
import '../static/css/MiQuanList.scss'


import SearchTmp from "../components/SearchTmp"
import PaginationTmp from '../components/Pagination'


const { confirm } = Modal;

function ShareTopicList(props) {
  // const [articleId, setArticleId] = useState(0); // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false) 
  const [pageCurrent, setPageCurrent] = useState(1) 
  const [paginationTotal, setPaginationTotal] = useState()
  //得到文章类别列表
  const getList = (pageSize,pageIndex,searchTxt,startTime,endTime) => {
    pageSize = pageSize?pageSize:10
    pageIndex = pageIndex?pageIndex:1
    searchTxt = searchTxt?searchTxt:""
    startTime = startTime?startTime:""
    endTime = endTime?endTime:""
    setLoading(true)
    axios({
      method: "get",
      url: servicePath.getShareTopic,
      withCredentials: false,
      params: {
        pageSize,
        pageIndex,
        searchTxt,
        endTime,
        startTime
      },
      header: { "Access-Control-Allow-Origin": "*" }
    }).then(res => {
      setList(res.data.list);
      console.log('0000002',res.data)
      
      setPaginationTotal(res.data.total)
      setLoading(false)
      
    }).catch((err)=>{
      message.error(err.response.data.data)
      if(err.response.status === 401){
        props.history.push("/login")
      }
      setLoading(false)
    })
  };
  //修改文章
  const updateTopicList = (id) => {
    props.history.push("/index/addShareTopic/" + id)
  };
  useEffect(() => {
    getList(10,1,'');
  }, []);
  //删除密圈的方法
  const delMiquan = id => {
    confirm({
      title: "确定要删除专题吗?",
      content: "如果你点击OK按钮，专题将会永远被删除，无法恢复。",
      onOk() {
        axios(servicePath.delTopic + id, { withCredentials: false }).then(
          () => {
            message.success("专题删除成功");
            getList(10,1,'');
          }
        ).catch((err)=>{
          message.error(err.response.data.data)
          if(err.response.status === 401){
            props.history.push("/login")
          }
          setLoading(false)
        })
      },
      onCancel() {
        message.success("没有任何改变");
      }
    });
  };
  const PaginationSizeChanger = (page, pageSize) => {
    console.log(page,'252525',pageSize);
    getList(pageSize,page,'')
    setPageCurrent(page)
  }
  const resetSearch = () =>{
    getList(10,1,"")
    PaginationSizeChanger(1,10)
  }
  const searchData = (searchTxt,searchTime) => {
    setPageCurrent(1)
    getList(10,1,searchTxt,searchTime?new Date(searchTime[0]).getTime():'',searchTime?new Date(searchTime[1]).getTime():'')
  }
  return (
    <div>
        <SearchTmp searchData={ searchData } resetSearch={ resetSearch } />
      <List
        loading={ loading }
        header={
          <Row className="list-div" style={{width:"100%"}}>
            <Col span={3}>
              <b>专题名称</b>
            </Col>
            <Col span={3}>
              <b>专题背景</b>
            </Col>
            <Col span={3}>
              <b>学习推荐</b>
            </Col>
            <Col span={3}>
              <b>资源数量</b>
            </Col>
            <Col span={3}>
              <b>学习资源</b>
            </Col>
            <Col span={3}>
              <b>更新时间</b>
            </Col>
            <Col span={3}>
              <b>发布时间</b>
            </Col>

            <Col span={3}>
              <b>操作</b>
            </Col>
          </Row>
        }
        bordered
        dataSource={list}
        renderItem={item => (
          <List.Item>
            <Row className="list-div" style={{width:"100%"}}>
              <Col span={3}>{item.shareTopicTitle}</Col>
              <Col span={3}>{item.shareImg}</Col>
              <Col span={3}>{item.shareAdvice}</Col>
              <Col span={3}>{list.length}</Col>
              <Col span={3}>{item.shareResource}</Col>
              <Col span={3}>{item.updateTime?timesago(item.updateTime):"未更新"}</Col>
              <Col span={3}>{formatStamp(item.addTime)}</Col>

              <Col span={3}>
                <Button type="link" onClick={()=> {
                  updateTopicList(item.id)
                }}>修改</Button>&nbsp;
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    delMiquan(item.id);
                  }}
                >
                  删除{" "}
                </Button>
              </Col>
            </Row>
          </List.Item>
        )}
      />
      
      {
        paginationTotal>10?<PaginationTmp total={ paginationTotal } current={ pageCurrent } PaginationSizeChanger={PaginationSizeChanger} />:""
      }
    </div>
  );
}

export default ShareTopicList;
